<template>
  <div class="containerDiv" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.outCode"
                clearable
                placeholder="出库单号"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="订单来源"
                v-model="queryParams.outType"
            >
              <el-option label="线上出库单" value="0"></el-option>
              <el-option label="手工出库单" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.erpCode"
                clearable
                placeholder="线上订单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.batchCode"
                clearable
                placeholder="波次号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.skuName"
                clearable
                placeholder="商品名称"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.receiver"
                clearable
                placeholder="收货人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.receiverPhone"
                clearable
                placeholder="手机号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="picker">
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="付款时间"
                end-placeholder="付款时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>

      </div>
    </el-form>

    <vxe-table style="margin-top: 10px"
               :data="tableData"
               :height="tableHeight"
               align="center"
               border
               :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column title="序号" type="seq" width="60"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="outCode" width="200" title="出库单号"></vxe-column>
      <vxe-column field="orderStatus" width="120" title="出库状态">
        <template v-slot="{row}">
          {{ returnDictLabel(out_order_status, row.orderStatus) }}
        </template>
      </vxe-column>
      <vxe-column field="outType" width="120" title="订单来源">
        <template v-slot="{row}">
          <div v-if="row.outType=='0'">线上出库单</div>
          <div v-if="row.outType=='1'">手工出库单</div>
        </template>
      </vxe-column>
      <vxe-column field="erpCode" width="200" title="线上订单号"></vxe-column>
      <vxe-column field="outNum" width="80" title="出库数量"></vxe-column>
      <vxe-column field="breedNum" width="80" title="品种数量"></vxe-column>
      <vxe-column field="batchCode" width="150" title="波次号"></vxe-column>
      <vxe-column width="380" title="商品信息">
        <template #default={row}>
          <div v-for="(item,index) in row.detailList" :key="index" style="display: flex;">
            <div style="width: 180px;">
              <ImagePreview  :width="150" :height="50" :src="row.skuImg" ></ImagePreview>
            </div>
            <div style="width: 200px;text-align: left">
              {{item.skuName}}
            </div>
          </div>
        </template>
      </vxe-column>

      <vxe-column field="receiver" width="150" title="收货人"></vxe-column>
      <vxe-column field="receiverPhone" width="150" title="联系方式"></vxe-column>
      <vxe-column field="receiverAddress" width="220" title="收货地址"></vxe-column>
      <vxe-column field="erpOrderTime" width="180" title="付款时间"></vxe-column>
      <vxe-column field="remark" width="220" title="备注"></vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getSelectOutOrderList} from "@/api/scApi";

const {proxy} = getCurrentInstance();
const { out_order_status } = proxy.useDict("out_order_status");

let loading = ref(false)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
let timeData = ref([])
const title = ref('')
const tableData = ref([])
const total = ref(0)

const resetQuery = () => {
  timeData.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

function getList() {
  loading.value = true
  queryParams.value.startTime = timeData.value[0]
  queryParams.value.endTime = timeData.value[1]
  queryParams.value.orderStatus=4// 0:待打印 1已分配 2 已打印 4已发货
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getSelectOutOrderList(params).then(res => {
    if (res.code === 200) {
      tableData.value = res.data
      total.value = res.total
    }
  }).finally(() => {
    loading.value = false
  })
}

let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 360;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 360;
  }
  getList()
})
</script>

<style scoped lang="scss">
.containerDiv {
  padding: 0 20px;
  height: calc(100vh - 90px);
}

</style>